See here for a quick how-to for creating contact forms:
How-to page for creating contact formsWhen the ContactUs app is enabled there is automatically a simple contact form made available in the website at /contactus
This form just allows the user to enter fairly common fields like name, phone number, email and message. The default form processing is also simple: the details are sent to the members of a group, by default the Administrators group.
However, you will often need contact forms that do many different things, such as collecting different fields, or sending to specific email addresses, and possibly sending an auto-responder message back to the user.
This can all be done by creating custom contact forms, and below are some notes and examples of how to do this.
Creating custom form pages
A custom form page is just a normal HTML page which includes a form with action=/contactus, and you add whatever fields you want to collect to the form, being sure to use appropriate names for the input elements.
You customise the behaviour of the form by adding data tags to the head section
Using custom form meta data
Usually you will add the head attributes to the page which contains your form. When the server process the POST request it uses the referrer header to determine which page the form was posted from, and then extracts the configuration data.
However, in some cases you want the have the actual form seperate from the page containing the configuration data. For example, you might have a single contact page where the user selects the type of request from a dropdown, and for each type of request you need to use differet configuration.
To do this just send an additional form parameter with the path to the form configuration page with the name 'contactForm'. See the Example 3 below
Dynamic message content
By default the email which gets sent contains a simple table of the information entered by the user.
However, this is usually not suitable for sending to users as an auto-responder. Instead you might want to build message content on the client side (ie with javascript) or you might want to use a server side template to generate the content.
See example 3 for an example
Special input fields
The following request parameters (ie form input names) have special meaning
| Input name | Meaning and notes |
|---|---|
| contactForm |
A path to the html page containing form meta data to use when processing the request
<form action="/contactus" class="form-horizontal register-form" method="post" role="form">
<input id="contactForm" name="contactForm" type="hidden" value="" />
|
| messageHtml | If set this will be used as the message content for the auto-response message, if auto-responder is enabled. May include special templating fields @{login}, @{firstName}, @{surName} |
| recipMessageHtml | If set this will be used as the message content sent to recipients (not the auto-responder). If its not set the content will be a table of any input fields followed by the user's message |
| attach.__ | File attachments: Any inputs beginning with "attach." will be added to the email when sent |
| Known profile fields |
firstName, lastName, email, phone, company These fields map directly to fields stored in the profile database so should be used where possible
<div class="form-group">
<label for="email" class="col-lg-4 control-label">Email*</label>
<div class="col-lg-8">
<input type="email" class="form-control email" id="email" name='email' required="true" />
</div>
</div>
|
| Any other field | Any other inputs sent will be stored with the contact request |
Sending an auto-response email, and notification to admin
Often you want to send an email to the user who has submitted a request automatically, perhaps to confirm that their contact request has been submitted. And you also want to send the details to an administrator.
In that case use the 'autoResponse' parameters above to send the auto response, and then setup an automatic email trigger in Manage Auto Emails to notify the admin group. If you are receiving a large number of contacts then you can use a scheduled email to send a CSV of contact requests daily.
Contact form configuration and metadata
These fields can be defined in the head section of a contact form page and control the behaviour of the processing of contact requests.
| Name | Notes and usage | Example |
|---|---|---|
| recipEmails |
Comma seperated list of specific email addresses to send to
|
|
| recipGroupName |
Send the email to the members of this group. Use the special value NONE to not send to any group, otherwise it will send to the default group, or the group configured on the ContactUs app
|
|
| isAutoResponse |
If true will send a response to the email address of the requester
|
|
| autoRespondFromAddress |
For auto response emails only, sets the from address
|
|
| messageHtml |
The content of the email to send. May be overridden by request parameter. If neither is provided defaults to a table of fields entered by the user
|
|
| autoRespondSubject |
For auto-response emails, sets the subject of the email
|
|
| assignToGroup |
Makes this profile (ie associated with the given email address) a member of the specified group
Supports templating with MVEL. Template variables include referer and contactForm which are Resource objects for the page which the form comes from and the page that the meta data has been loaded from, respectively. In many cases they will be the same
This example will add the profile to a group with the same name as the page the form was submitted from, creating it if necessary |
|
| attach.__ |
Attaches a file from the server. Use any name that begins with attach., such as attach.1, attach.2, etc
|
Contact forms and templates
If you implement your form in a template and you need metadata fields, make sure you either put the metadata in the actual page file (not the templat) otherwise it wont get found.
Or, if you would like to keep the metadata in the same file as the form then use the contactForm input to specify the template file
Eg, <input name='contactForm' value='/templates/forms/my-custom-contactform.html'>
Examples
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Request an Appointment</title>
<link rel="template" href="theme/page" />
</head>
<body>
<h2 class='col-md-offset-1'>Request an Appointment</h2>
<div class='row'>
<div class='col-md-offset-1 col-md-5'>
<!--<p><b>Please fill out your details:</b></p>-->
<form action='/contactus' method='post' class="form-horizontal register-form" role="form" >
<input id="source" name="source" type="hidden" value="" />
<input type="hidden" name='Type' value="Request an appointment" />
<div class="form-group">
<label for="fullName" class="col-lg-4 control-label">Full Name*</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="fullName" name='Name' required="true" />
</div>
</div>
<div class="form-group">
<label for="phone" class="col-lg-4 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="phone" name='phone' />
</div>
</div>
<div class="form-group">
<label for="address" class="col-lg-4 control-label">Address</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="address" name='address' />
</div>
</div>
<div class="form-group">
<label for="city" class="col-lg-4 control-label">City/Suburb*</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="city" required="true" name='city' />
</div>
</div>
<div class="form-group">
<label for="postcode" class="col-lg-4 control-label">Postcode*</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="postcode" required="true" name='Postcode' />
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-4 control-label">Email*</label>
<div class="col-lg-8">
<input type="email" class="form-control email" id="email" name='email' required="true" />
</div>
</div>
<div class="form-group">
<label for="Comments" class="col-lg-4 control-label">Comments/Your Needs*</label>
<div class="col-lg-8">
<textarea class="form-control" id="comments" name='message' required="true" ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-4 col-lg-8">
<button type='submit' class='btn btn-primary pull-right'>Request an appointment</button>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
</form>
</div>
<div class='col-md-6'>
<div><img src="/theme/images/request_image.jpg" width="570" height="251" class="img-responsive" /></div>
</div>
</div>
<div class="modal fade thank-you">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Thank you</h4>
</div>
<div class="modal-body">
<p>Thank you for your request. We'll respond to you shortly.</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="/">Back to home page</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">//
</script>
<script type="text/javascript">
$(function() {
var source = checkSourceCookie();
$(".register-form").forms({
confirmMessage: "Request sent",
callback: function() {
$(".thank-you").modal();
}
});
});
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>Life Stage NE-S1 form</title>
<script title="assignToGroup" type="data/parameter" >NE-S1</script>
<script title="autoRespondSubject" type="data/parameter" >My Lifestyle Stage</script>
<script title="autoRespondFromAddress" type="data/parameter" >noreply@mydomain.com</script>
<script title="isAutoResponse" type="data/parameter" >true</script>
<script title="recipGroupName" type="data/parameter" >NONE</script>
</head>
We set the contactForm hidden input based on user selection, and this tells the server which contact form to pull meta data from, such as who to send the email to, subject, etc
In this example the contact form metadata is /life-stage-ne1.html, /life-stage-n2.html, etc, and is constructed in the callback from the forms plugin, and then set onto the input. When the server received the POST request it will look up the page at that location and use the metadata data inside it to process the request.
In this example we also send the message content, by extracting content hidden in the page based on user selection, and setting it into the messageHtml hidden input
<form action="/contactus" class="form-horizontal register-form" method="post" role="form">
<input id="contactForm" name="contactForm" type="hidden" value="" />
<input id="messageHtml" name="messageHtml" type="hidden" value="" />
...
<p><b>I am:</b></p>
<div class="form-group">
<div class="col-lg-8">
<div>
<label>
<input id="shortly" name="lifeStage" type="radio" value="1" />
10 - 20 years from retirement</label>
</div>
<div>
<label>
<input id="six_month" name="lifeStage" type="radio" value="2" />
5 - 10 years from retirement</label>
</div>
<div>
<label>
<input id="twelve_month" name="lifeStage" type="radio" value="3" />
In retirement</label>
</div>
</div>
</div>
...
<script type="text/javascript">
$(function() {
$(".register-form").forms({
confirmMessage: "Thank you, your details have been received",
validate: function() {
var opt = $("input[name=lifeStage]:checked");
if (opt.length > 0) {
var group = opt.val();
log("group", group);
$("#contactForm").val("/life-stage-ne" + group + ".html");
var confirmEmailContent = $("#emailContent" + group).html();
$("#messageHtml").val(confirmEmailContent);
return true;
} else {
alert("Please select an option");
return false;
}
},
callback: function(resp, form) {
$(".thank-you").modal();
}
});
});
</script>
</form>
The metadata pages look like this, eg /life-stage-ne1.html
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>Life Stage NE-S1 form</title>
<script title="assignToGroup" type="data/parameter" >NE-S1</script>
<script title="autoRespondSubject" type="data/parameter" >My Lifestyle Stage</script>
<script title="autoRespondFromAddress" type="data/parameter" >noreply@somewhere.com</script>
<script title="isAutoResponse" type="data/parameter" >true</script>
<script title="recipGroupName" type="data/parameter" >NONE</script>
</head>
<body>
<!-- This page is just to hold metadata used when submitting the contact form, so has no body -->
</body>
</html>
Ask a question, or offer an answer